export const citizenBtnMap = [
  { key: 1, value: '身份占比' },
  { key: 2, value: '股东投资' }
]

export const tenementConditionMap = [
  { key: 1, value: '老旧小区' },
  { key: 2, value: '物业经营' },
  { key: 3, value: '高速公路' }
]

export const rankingBtns = [
  { key: 1, value: '环境卫生' },
  { key: 2, value: '公共卫生安全' },
  { key: 3, value: '生态环境' }
]

export const municipalList = [
  // 大市政
  {
    key: 1,
    text: '道路面积',
    url: require('@/assets/dashboard/municipal_1.png'),
    extra: '㎡'
  },
  {
    key: 2,
    text: '人员数',
    url: require('@/assets/dashboard/municipal_2.png'),
    extra: '人'
  },
  {
    key: 3,
    text: '车辆数',
    url: require('@/assets/dashboard/municipal_3.png'),
    extra: '辆'
  },
  {
    key: 4,
    text: '设备数',
    url: require('@/assets/dashboard/municipal_4.png'),
    extra: ''
  },
  {
    key: 5,
    text: '设施数',
    url: require('@/assets/dashboard/municipal_5.png'),
    extra: ''
  },
  {
    key: 6,
    text: '公厕数量',
    url: require('@/assets/dashboard/municipal_6.png'),
    extra: '个'
  },
  {
    key: 7,
    text: '累计垃圾清运量',
    url: require('@/assets/dashboard/municipal_7.png'),
    extra: '顿'
  },
  {
    key: 8,
    text: '水域保洁面积',
    url: require('@/assets/dashboard/municipal_8.png'),
    extra: '㎡'
  },
  {
    key: 9,
    text: '绿化养护面积',
    url: require('@/assets/dashboard/municipal_9.png'),
    extra: '㎡'
  },
  {
    key: 10,
    text: '乔木数',
    url: require('@/assets/dashboard/municipal_10.png'),
    extra: '棵'
  }
]

export const tenementList = [
  // 大物业
  {
    key: 1,
    text: '道路面积',
    url: require('@/assets/dashboard/tenement_1.png'),
    extra: '㎡'
  },
  {
    key: 2,
    text: '微改投入',
    url: require('@/assets/dashboard/tenement_2.png'),
    extra: '个'
  },
  {
    key: 3,
    text: '电梯加装',
    url: require('@/assets/dashboard/tenement_3.png'),
    extra: '个'
  },
  {
    key: 4,
    text: '社区养老院',
    url: require('@/assets/dashboard/tenement_4.png'),
    extra: '个'
  },
  {
    key: 5,
    text: '社区医疗',
    url: require('@/assets/dashboard/tenement_5.png'),
    extra: '个'
  }
]

const basicsOptions = {
  label: {
    color: '#65c6e7'
  },
  labelLine: {
    lineStyle: {
      color: '#c8f1ff',
      opacity: 0.5
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  }
}

const citizenLabel = count => {
  return {
    formatter: ['{a|{b}: {d}%}', `{b|${count}}`].join('\n'),

    rich: {
      a: {
        lineHeight: 18,
        color: '#65c6e7'
      },
      b: {
        lineHeight: 18,
        color: '#65c6e7'
      }
    }
  }
}

export const citizenOptionFn = values => {
  const data = () => {
    return values.map(item => {
      const { value, name, count } = item
      return {
        value,
        name,
        label: citizenLabel(count)
      }
    })
  }

  return {
    color: ['#FBB437', '#7765F7', '#21C58C'],
    ...basicsOptions,
    series: [
      {
        name: '身份占比',
        type: 'pie',
        radius: [20, 50],
        roseType: 'area',
        startAngle: 180,
        data: data()
      }
    ]
  }
}

export const zoologyOptionFn = (text, data) => {
  return {
    color: ['#5A8CFD', '#5ED775', '#FDDB40', '#F88EA3'],
    ...basicsOptions,
    title: {
      text,
      textStyle: {
        color: '#becdd2',
        fontSize: 13,
        lineHeight: 18
      },
      left: 'center'
    },
    series: [
      {
        name: '山水田林湖面积',
        type: 'pie',
        radius: '50%',
        startAngle: 180,
        center: ['50%', '60%'],
        data
      }
    ]
  }
}

export const mapOptionFn = (data) => {
  return {
    backgroundColor: '#16254A',
    geo: {
      map: 'world',
      zoom: 6,
      center: [104.2978515625, 35.8544921875],
      label: {
        emphasis: {
          show: true,
          color: '#fff'
        }
      },
      itemStyle: {
        normal: {
          color: '#060910', // 地图背景色
          opacity: 0.7,
          borderWidth: 1
        },
        emphasis: {
          show: true,
          color: 'rgba(37, 43, 61, .5)' // 悬浮背景
        }
      }
    },
    series: [
      {
        name: 'Top 5',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data,
        symbolSize: function(val) {
          return val[2] / 10
        },
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
          normal: {
            formatter: '{b}',
            position: 'right',
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: '#12DCE9',
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        zlevel: 1
      }
    ]
  }
}
